<template>
  <el-dialog v-if="dialog" title="我的模板" custom-class="out-dialog" :close-on-click-modal="false" append-to-body :visible.sync="dialog"  width="900px">
      <div class="page-template">
        <div class="page-template_right">
          <ul>
            <li v-for="(item, index) in list" :key="index" style="width:200px;display:inline-block;margin:0 10px 10px 0;" @click="chooseTemplate(item, index)">
              <div v-if="selectedItem.id === item.id" class="item active image-sel-style" >
                <img :src="item.templateImgUrl" alt="" style="width:100%;height:100%;">
                <div class="image-sel-box-style" />
              </div>
              <div v-else class="item image-unsel-style">
                <img :src="item.templateImgUrl" alt="" style="width:100%;height:100%;">
              </div>
              <span class="template-title-style">{{item.templateName}}</span>
            </li>
          </ul>
          <vxe-pager
            :current-page.sync="searchParams.pageNum"
            :page-size.sync="searchParams.pageSize"
            :total="total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
            @page-change="getMicroTemplateList"
          />
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">取 消</el-button>
      <el-button type="primary" @click="clickSure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMicroTemplatePageList } from '@/api/shoppingMall/feature'
export default {
  props: {
    max: {
      required: false,
      type: Number,
      default: () => 1
    },
    pageId: {
      required: false,
      type: String,
      default: ''
    },
    chooseList: {
      required: false,
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkList: [],
      selectedItem: {},
      active: 1,
      dialog: false,
      searchParams: {
        feebackBlank: 1,
        pageNum: 1,
        pageSize: 4
      },
      total: 1,
      list: []
    }
  },
  watch: {
    dialog(val) {
      if (val) {
        this.checkList = JSON.parse(JSON.stringify(this.chooseList))
        this.getMicroTemplateList()
      }
    }
  },
  methods: {
    chooseTemplate(item, index) {
      this.checkList = []
      this.checkList.push(item.path)
      this.selectedItem = item
    },
    getMicroTemplateList() {
      getMicroTemplatePageList({ ...this.searchParams }).then(res => {
        this.total = res.total
        this.list = res.records
      })
    },
    clickSure() {
      if (!this.selectedItem) {
        this.$message.error('请选择模板')
        return false
      }
      this.$emit('choosePageTemplateEnd', { data: this.selectedItem }
      )
      this.dialog = false
    }
  }
}
</script>

<style lang="scss">
.page-template {
  display: flex;
  justify-content: space-between;
  .page-template_left {
    width: 20%;
    margin-right: 10px;
  }
  .page-template_right {
    flex: 1;
    .image-sel-style {
       box-sizing:border-box;
       width: 200px;
       height: 320px;
       position: relative;
       border: 2px solid #07d;
       position: relative;
    }
    .image-sel-box-style {
       position: absolute;
       display: block;
       content: '';
       right: -1px;
       top: 0;
       border: 14px solid #07d;
       border-left-color: transparent;
       border-bottom-color: transparent;
       z-index: 1;
    }
    .image-unsel-style {
       box-sizing: border-box;
       box-shadow: 3px 3px 3px #888888;
       width: 200px;
       height: 320px;
       position: relative;
       border: 1px solid #cfc6c9;
    }
    .template-title-style {
       position: relative;
       display: block;
       text-align:  center;
       font-size: 14px;
       margin-top: 10px;
       color: #07d;
    }
  }
}
.out-dialog {
  width: 900px;
}
</style>
